Page({
  data: {
    // 文本框的数据模型
    // 字符串类型 这里只能用单引号
    input: "",
    // 任务清单数据模型
    todos: [{
      name: "Learning WEAPP",
      completed: false,
    },
    {
      name: "Learning JavaScript",
      completed: true,
    },
    {
      name: "Learning HTML",
      completed: false,
    },
    ],
    leftCount: 0,
    allCompleted: false,
  },
  onLoad: function () {
    this.initLeftCount();
  },
  initLeftCount() {
    var todos = this.data.todos;
    var leftCount = 0;
    todos.forEach((item) => {
      if (item.completed === false) {
        leftCount += 1;
      }
    });
    this.setData({
      leftCount: leftCount,
    });
  },
  inputChangeHandle: function (e) {
    this.setData({
      input: e.detail.value,
    });
  },
  // 需要注意冒泡的问题
  removeTodoHandle: function (e) {
    var todos = this.data.todos;
    // splice 方法的返回值是移除掉的元素--数组
    // 只取一个就要加下标
    // todos会移除掉 index 所指向的元素
    var item = todos.splice(e.currentTarget.dataset.index, 1)[0];
    var leftCount = this.data.leftCount - (item.completed ? 0 : 1)
    this.setData({
      todos: todos,
      leftCount: leftCount
    });
    // this.initLeftCount();
  },
  /* 
      1. 先让按钮点击时执行一段代码
      2. 获取文本框里面的值
        2.1 由于小程序的数据绑定是单向的， 
        必须要要给文本框注册改变事件，
      3. 将这个值添加到列表当中
    */
  addTodoHandle: function (e) {
    this.inputChangeHandle(e)
    /* 
                当添加按钮点击事件发生时执行的函数
            */
    if (this.data.input.trim() === "") return;
    let todos = this.data.todos;
    todos.push({
      name: this.data.input.trim(),
      completed: false,
    });
    /* 
必须显式的通过setData去改变数据,
这样界面上才会得到变化
*/
    this.setData({
      input: "",
      todos: todos,
      leftCount: this.data.leftCount + 1,
    });
  },
  toggleTodoHandle: function (e) {
    // 切换当前选中的item 的完成状态
    var item = this.data.todos[e.currentTarget.dataset.index];
    item.completed = !item.completed;
    // 根据当前任务的完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1);
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount,
    });
  },
  toggleAllHandle: function () {
    // this 在这里永远指向的是当前页面对象
    console.log(this);
    this.data.allCompleted = !this.data.allCompleted;
    var todos = this.data.todos;
    // todos.forEach(function(itme) {
    //     // toggleAllHandle 方法中的 this 与 回调
    //     // 函数中的this指向是不同的
    //     // item.completed = this.data.allCompleted
    //     console.log(this);
    // });
    var that = this;
    todos.forEach(function (item) {
      item.completed = that.data.allCompleted;
    });
    var leftCount = that.data.allCompleted ? 0 : todos.length
    this.setData({
      todos: todos,
      leftCount: leftCount
    });
    // this.initLeftCount();
  },
  clearCompletedHandle: function () {
    // todos => 新的未完成的列表
    // var todos = []
    // this.data.todos.forEach(function (item) {
    //   if (!item.completed) {
    //     todos.push(item)
    //   }
    // })

    var todos = this.data.todos.filter(function (item) {
      return !item.completed
    })
    this.setData({
      todos: todos
    })
  }
});